<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;flex:1;flex-wrap: wrap;">
				<!-- <el-input v-model="searchParam.keyword" placeholder="请输入姓名/昵称/联系方式" style="width:200px"></el-input>
				<el-select v-model="searchParam.type" placeholder="请选择用户角色" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in typeList" :key="index" :label="item.title" :value="item.id">
				    </el-option>
				</el-select>
				<el-select v-model="searchParam.status" placeholder="请选择认证状态" style="width:200px;margin-left: 10px;">
				    <el-option v-for="(item,index) in statusList" :key="index" :label="item" :value="index">
				    </el-option>
				</el-select>
                <el-date-picker style="width:340px" clearable class="ml-10" v-model="searchParam.search_time"
                    value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <div class="ml-10" >
                    <el-button type="primary" @click="searchinfo">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div> -->
			</div>
			<div style="display: flex;">
				<el-button type="primary" @click="add()">添加</el-button>
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<!-- <el-button type="primary" @click="exportExcel">导出</el-button> -->
				<el-button style="margin-left: 10px;"  type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button>
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list"
			@selection-change="onSelectionChange" height="100%" row-key="id" header-cell-class-name="main-table-header"
			@row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<el-table-column  show-overflow-tooltip label="活动名称" prop="activity_name"></el-table-column>
			<!-- <el-table-column label="banner图">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px" :src="row.img" :preview-src-list="[row.img]">
					</el-image>
				</template>
			</el-table-column> -->
			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<el-table-column show-overflow-tooltip label="活动人数" prop="activity_num" ></el-table-column>
			<el-table-column show-overflow-tooltip label="是否需要核销" prop="is_scan" >
				<template slot-scope="{row}">
					<el-tag type="success" v-if="row.is_scan==1">是</el-tag>
					<el-tag  v-if="row.is_scan==0">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="活动开始时间" prop="apply_start_time">
				<template slot-scope="{row}" v-if="row.apply_start_time">
					{{ row.apply_start_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="活动结束时间" prop="apply_end_time">
				<template slot-scope="{row}" v-if="row.apply_end_time">
					{{ row.apply_end_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="{row}">
					<el-button type="primary" @click.stop="add(row)">编辑</el-button>
					<!-- <el-button type="warning" @click.stop="add(row)">详情</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit"
			:total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next">
		</el-pagination>
		<el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose"
			width="60%">
			<add @close="close" :formData="userinfo" @search="addcommunity"></add>
		</el-dialog>
	</div>
</template>
<script>
	// import companyCate from '@/components/company-cate.vue'
	// import supervisorSelect from '@/components/supervisor-select.vue'auth
	import add from './components/add.vue'
	import { imghttp,get,post,del } from '@/assets/js/http'
	// import eluploadfile from '../../components/el-upload-file.vue'
	export default {
		components: { add },
		data() {
			return {
				list: [],
				selection: [],
				addShow: false, //添加显示
				centerDialogVisible: false, //详情弹窗
				title: '', //弹窗标题
				userinfo: {}, //用户信息
				typeList: [{
					id: 1,
					title: '社区民警'
				}, {
					id: 2,
					title: '综治巡逻队员'
				}, {
					id: 3,
					title: '网格员'
				}], //角色1社区民警 2综治巡逻队员 3网格员
				statusList: ['未认证', '认证待审核', '认证通过', '认证驳回'], //认证状态 0未认证 1认证待审核 2认证通过 3认证驳回
				searchParam: {
					page: 1,
					limit: 20,
					total: 0,
					cadre_id: '',
					search_time: [],
					status: '',
					type: '',
					keyword: '',
				},
				searchParamCp: {
					status: '',
				},
				formDataStatus: false,
			}
		},
		created() {
			Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
			Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
			this.getList()
		},
		watch: {
			'$route': {
				deep: true,
				handler() {
					this.reset()
				}
			},
		},
		methods: {
			//获取社区列表
			async getList() {
				this.$loading()
				// let { list,total } = 
				await get({
					url: '/admin/activity.Activity/index',
			  params: {
						...this.searchParam,
						...{
							server_type: this.$route.query.type ? 2 : 1,
							// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
						}
					}
				}).then(res => {
					this.list = res.list
					this.searchParam.total = res.total
					this.importindex = []
					this.$loading().close()
				})
			},
			//添加/编辑弹窗
			add(row) {
				if (row) { //编辑
					this.centerDialogVisible = true
					this.title = "编辑活动"
					get({
						url: '/admin/activity.Activity/edit',
						params: {
							id: row.id
						}
					}).then(res => {
						// this.userinfo = res.row
						const img = []
						res.row.activity_img = res.row.activity_img.split(',')
						res.row.activity_img.forEach(item=>{
							img.push({
								name:item,
								url:item
							})
						})
						res.row.apply_time = []
						this.userinfo = res.row
						this.userinfo.apply_time = [res.row.apply_start_time*1000,res.row.apply_end_time*1000]
						this.userinfo.activity_img = img
						
						// this.userinfo.img = [{
						// 	name: res.row.img,
						// 	url: res.row.img,
						// }]
					})

				} else { //添加
					this.userinfo = {}
					this.centerDialogVisible = true
					this.title = "添加活动"
				}
				this.formDataStatus = true;
			},
			//添加轮播图
			addcommunity(result) {
				const info = JSON.parse(JSON.stringify(result))
				// info.img = info.img[0].url
				// info.desc = ''
				console.log(info)
				if (info.id) {
					post({
						url: '/admin/activity.Activity/edit',
						data: info
					}).then(res => {
						this.close()
						this.getList()
					})
				} else {
					post({
						url: '/admin/activity.Activity/add',
						data: info
					}).then(res => {
						this.close()
						this.getList()
					})
				}
			},
			//关闭弹窗
			close() {
				this.centerDialogVisible = false
			},
			reset() {
				this.searchParamCp = this.$options.data().searchParam
				this.searchParam = this.$options.data().searchParam
				this.getList()
			},
			searchinfo() {
				this.searchParam.page = 1
				this.searchParam = {
					...this.searchParam,
					...this.searchParamCp
				}
				this.getList()
			},
			onCurrentChange() {
				this.getList()
			},
			onRowClick(row) {
				this.$refs.table.toggleRowSelection(row);
			},
			onSelectionChange(selection) {
				this.selection = selection;
			},
			selectdel() {
				this.$confirm(
						`此操作将永久删除该${this.selection.length}个活动, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let query = "?";
						for (let i = 0; i < this.selection.length; i++) {
							const item = this.selection[i];
							if (i > 0) {
								query += "&ids[]=" + item.id;
							} else {
								query += "ids[]=" + item.id;
							}
						}
						await del({
							url: "/admin/activity.Activity/del" + query,
							successTip: true,
							loading: true
						});
						this.getList()
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//导出
			async exportExcel() {
				this.$loading()
				let res = await get({
					export: true,
					url: '/admin/server.Appeal/export',
					params: {
						...this.searchParamCp,
						...{
							search_time: this.searchParamCp.search_time && this.searchParamCp.search_time
								.length ? this.searchParamCp.search_time.join(' - ') : ''
						}
					}
				})
				let a = document.createElement('a');
				var url = URL.createObjectURL(res);
				a.href = url;
				a.click();
				this.$loading().close()
			},
			//导入
			async upload({
				raw
			}) {
				this.$loading({
					text: '导入中 请等待...'
				})
				console.log(raw)
				await imghttp({
					url: '/admin/basic.Masses/import',
					data: {
						file: raw
					},
					successTip: true
				})
				this.getList()
				this.$loading().close()
			},
			onDialogClose() {

			},

		}
	}
</script>

<style>
	.el-date-editor .el-range-separator {
		padding: 0;
	}
</style>
